@import 'var.scss';
@import 'global.scss';

.the-header-container{
    width: 100%;
    background-color: red;
    height: $header-height;
    // border: $border;
    position: fixed;
    top: 0;
    display:flex;
    justify-content:center;
    z-index: 999;
    
    background-color: #fff;
    
    .the-header {
        // transform: translate(50%,0);
        // margin: 0 auto;
        @include layout;
        width: 100%;
        min-width: 800px;
        max-width: 1200px;
        height: $header-height;
        line-height: $header-height;
        
        // padding: $header-padding;
        margin: $header-margin;
        background-color: $theme-header-color;
        // @include box-shadow($box-shadow);
        box-sizing: border-box;
        z-index: 100;
        // border: $border;
        display: flex;
        justify-content: flex-end;
    }
    
    .header-logo {
        display: flex;
        align-items: center;
        margin: $header-logo-margin;
        font-size: $font-size-logo;
        font-weight: bold;
        white-space: nowrap;
        // border: $border;
        cursor: pointer;
        .icon {
            @include icon(($header-height / 3) * 2, $color-black);
            vertical-align: middle;
        }
    }
    
    /*nav*/
    .navbar {
        flex: 1;
        height: $header-height;
        white-space: nowrap;
        list-style: none;
        display: flex;
        box-sizing: border-box;
        // border: $border;
        padding: $header-nav-padding;
        margin: $header-nav-margin;
        li {
            margin: $header-nav-item-margin;
            padding: $header-nav-item-padding;
            font-size: $font-size-header;
            color: $color-grey;
            text-align: center;
            border-bottom: none;
            box-sizing: border-box;
            cursor: pointer;
        }
        li:hover {
            color:$color-red;
        }
    }
    
    /*搜索*/
    .header-search {
        @include layout(center, center);
        border-radius: $header-search-radius;
        overflow: hidden;
        // border: $border;
    
        input {
            height: $header-search-height;
            width: $header-search-width;
            font-size: $font-size-default;
            border: 0;
            text-indent: 10px;
            background-color: $color-light-grey;
            &:focus {
                outline: none;
            }
        }
    
        .search-btn {
            @include layout(center, center);
            background-color: $color-blue-active;
            width: $header-search-btn-width;
            height: $header-search-btn-height;
            cursor: pointer;
            .icon {
                @include icon(1.2em, $color-white);
            }
        }
    }
    
    /*用户*/
    .header-right {
        position: relative;
        @include layout(center, center);
        // border:$border;
        span{
            cursor: pointer;
        }
        .user-info{
            @include layout(center, center);
            .el-avatar{
                margin-left: 5px;margin-right: 5px;
            }
        }
        
    }
    
    .menu {
        display: none;
        line-height: 0px;
        position: absolute;
        background-color: $color-white;
        @include box-shadow(1px 1px 10px rgba(0, 0, 0, 0.4));
        width: $header-menu-width;
        padding: $header-menu-padding;
        border-radius: $header-menu-radius;
        top: $header-height + 10px;
        right: -20px;
        z-index: 5;
        text-align: center;
        cursor: pointer;
    
        li {
            display: inline-block;
            width: 100%;
            height: 40px;
            line-height: 40px;
    
            &:hover {
                background-color: $theme-color;
                color: $color-white;
            }
        }
    
        :nth-child(1):before {
            content: ' ';
            display: block; /*独占一行*/
            position: absolute;
            right: 45px;
            top: -5px; /*果断的露出上半部分*/
            width: 10px;
            height: 10px;
            background-color: $color-white;
            /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/
            transform: rotate(45deg);
        }
        // :nth-child(1):hover:before {
        // background-color: $theme-color;
        // }
    }
    
    .show {
        display: block;
    }
    
    .active {
        color: $theme-color !important;
        border-bottom: 5px solid $theme-color !important;
    }
    
}
